<template>
  <el-dialog
    width="80%"
    v-model="visible"
    @closed="onCancel"
    append-to-body
    :title="dialogDatas.title"
    class="cooperationDialog"
  >
    <el-form :model="form" inline ref="formRef1 " class="px10">
      <div v-for="panel in dialogDatas.panelDatas">
        <p class="mx1 mb10 font-bold text-base">{{ panel.title }}</p>
        <template v-for="item in panel.datas" :key="item.label">
          <el-form-item :label="item.label" v-if="item.type === 'cascader'" class="is-required">
            <el-cascader
            v-model="item.value"
            :options="options"
            clearable
            prop="item.value"
            :disabled="isDisabled||item.isDisabled"
          />
          </el-form-item>
          <el-form-item :label="item.label" v-if="item.type === 'input'" class="is-required">
            <el-input v-model="item.value" :placeholder="item.placeholder" :disabled="isDisabled||item.isDisabled" />
          </el-form-item>
          <el-form-item :label="item.label" v-if="item.type === 'select'" class="is-required">
            <el-select v-model="item.value" :placeholder="item.placeholder" :disabled="isDisabled||item.isDisabled">
              <el-option
                :label="option.name||option.employeeName"
                :value="option.id"
                v-for="(option, i) in item.options()"
                :key="i"
              />
            </el-select>
          </el-form-item>

          <el-form-item :label="item.label" v-if="item.type === 'radio'" class="is-required">
            <el-radio-group v-model="item.value">
              <el-radio
                :label="radio.label"
                v-for="(radio, radioIndex) in item.options()"
                :key="radioIndex"
                :disabled="isDisabled||item.isDisabled"
              />
            </el-radio-group>
          </el-form-item>

          <el-form-item :label="item.label" v-if="item.type === 'textarea'" class="is-required">
            <el-input v-model="item.value" type="textarea" :disabled="isDisabled||item.isDisabled" />
          </el-form-item>

          <el-form-item :label="item.label" v-if="item.type === 'date'" class="is-required">
            <el-date-picker
            v-model="item.value"
            type="date"
            :placeholder="item.placeholder"
            :disabled="isDisabled||item.isDisabled"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
          </el-form-item>
          <el-form-item :label="item.label" v-if="item.type === 'upload'" class="is-required">
            <!-- <Upload  :disabled="isDisabled" :file="item.value" @handleChange="handleChange" /> -->
            <Upload
            v-model="fileList.array"

            v-if="item.type === 'upload'"
          :show-file-list="true"
          :multiple="false"
          :limit="1"
          :file-list="fileList.array"
          :action-url="uploadUrl"
          :disabled="isDisabled"
          @success="handleSuccess"
          @remove="handleRemove"
          @handleChange="handleChange"></Upload>

          </el-form-item>
        </template>
      </div>
    </el-form>

    <template #footer v-if="!isDisabled">
      <span class="dialog-footer flex justify-center my6">
        <!-- <el-button color="#4880ff" type="primary" @click="visible = false">重置</el-button> -->
        <el-button @click="onCancel">取消</el-button>
        <el-button type="primary" @click="onConfirm">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, reactive, computed, watch, defineProps,toRefs } from 'vue';
import type { IUserItem } from '@/api/user/type';
import regionData from '@/assets/json/regionData.json';
import { Upload } from '../../components';
const emits = defineEmits(['handleFormValue', 'onCancel', 'onConfirm']);
const uploadUrl=ref('admin/common/uploadFileByPublic')
// defineProps({
//   visible: {
//       type: Boolean,
//       default: false
//     },
// });
const options = ref(regionData);
let fileList = reactive({array:[]});

let visible = ref(false);
const dialogDatas = reactive({});
// let imgUrl = reactive('');


let chanFormValue = reactive({});
const formRef1 = ref<FormInstance>();

watch(dialogDatas, (newVal) => {
  newVal.panelDatas.forEach((panelItem: { title: ''; datas: [] }) => {
    panelItem.datas.forEach((d: { value: any[]; type: string; eName: string | number | any[] }) => {
      if (d.value) {
        if (d.type === 'cascader') {
          d.keys.forEach((item: string | number, i: number) => {
            chanFormValue[item] = d.value[i];
          });
          return;
        }else
         if (d.type === 'upload') {
          if(newVal.type !== 'add'){//查看
            fileList.array=[{url: d.value, name:  Math.floor(Math.random() * 10) + 1}]
          }else{//新增
            d.value = fileList.array
          }
       return
      }
        chanFormValue[d.eName] = d.value;
      }else{
       const noValue= Object.keys(chanFormValue).includes(d.eName)
        if(noValue){
          delete  chanFormValue[d.eName]
        }
    }
      emits('handleFormValue', chanFormValue);
    });
  });
},{deep:true});
const init = async (data?: IRoleItem) => {
  // visible.value = true;
  if (data) {
    // await nextTick();
    Object.assign(dialogDatas, data);
  }
  };
const handleDialog=(value)=>{
  visible.value=value
}
const isDisabled = computed(() => (dialogDatas.type === 'check' ? true : false)); //查看为不可编辑
const onReset = () => {
  fileList.array=[]
  //重置表单
  if (!formRef1.value) return;
  formRef1.value.resetFields();
};
const onCancel = () => {
  //取消按钮事件
  onReset();
  // visible.value = false;
  emits('onCancel');
};
const onConfirm = () => {
  //确定按钮事件
  onReset();
  // visible.value = false;
  emits('onConfirm', chanFormValue, dialogDatas.type);

};
const handleChange= async (file, fileList) => {

};


 const  handleRemove=(file, fileList)=> {
      dialogDatas.panelDatas.forEach((panelItem: { title: ''; datas: [] }) => {
    panelItem.datas.forEach((d: { value: any[]; type: string; eName: string | number | any[] }) => {
      if (d.type === 'upload') {
          d.value = fileList
          const noValue= Object.keys(chanFormValue).includes(d.eName)
        if(noValue){
          delete  chanFormValue[d.eName]
        }
       return
      }
    });
  });
    }

   const handleSuccess=(response, file, fileList)=> {
    dialogDatas.panelDatas.forEach((panelItem: { title: ''; datas: [] }) => {
    panelItem.datas.forEach((d: { value: any[]; type: string; eName: string | number | any[] }) => {
      if (d.type === 'upload') {
          d.value =[{
            name:'a.jpg',
            url:response.data.url[0],
          }
          ]
          chanFormValue[d.eName] = response.data?.url[0]
       return
      }
    });
  });

  }
// const handleChange = (url: any) => {

// };
// onBeforeMount(() => {
//   chanFormValue = {};
// });
defineExpose({ init ,handleDialog});
</script>

<style lang="scss">
.cooperationDialog {
  .el-form-item {
    display: inline-block;
  }
  .el-form-item__content {
    width: 200px !important;
  }
}
</style>
